<template>
    <div ref="threeContainer"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import {initConfiguration, THREE, scene, camera, renderer} from '@/assets/three/twin.js';//获取到threejswebgl的渲染器对象

const threeContainer = ref(null);
let mesh;

onMounted(() => {
    
    if(threeContainer?.value) {
        // // 长方形
        // BoxGeometry();
        // // 圆柱体
        // CylinderGeometry();
        // 球体
        SphereGeometry();
        // .gltf
        initCreateGLTF();
        // 光源
        initDirectionalLight();
        // 场景初始化（相机+坐标系+渲染器）
        initConfiguration(mesh);
        threeContainer.value.appendChild(renderer.domElement);
    }
});
// 几何体（长方形）
const BoxGeometry = () => {
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    initCreateTexture(geometry, {x: 100, y: 100, z: 100})
}
const CylinderGeometry = () => {
    const geometry = new THREE.CylinderGeometry(50, 50, 100, 100);
    initCreateTexture(geometry, {x: 100, y: 0, z: 0})
}
const SphereGeometry = () => {
    const geometry = new THREE.SphereGeometry(50, 100, 100);
    initCreateTexture(geometry,{x: 100, y: -50, z: 100})
}

const initCreateGLTF = () => {
    const gltfLoader = new GLTFLoader();
    gltfLoader.load('/blender/monkey.glb', (gltf) => {
        console.log(gltf)
        const model = gltf.scene;
        model.rotateY(45)
        model.scale.set(70, 70, 70);
        model.position.set(0, 0, 0);

        // 遍历模型的所有材质，并设置颜色
        model.traverse((node) => {
            if (node.isMesh) {
                // node.material.color.set(0x0000ff); // 设置颜色为红色
                node.material.color.set(0x00FFFF)
                // node.material.emissive(0x08A8A0)
            }
        });
        scene.add(model);
    });
};
// 公用创建方法
const initCreateTexture = (geometry, coord) => {
    //2. 长方体材质
    const material = new THREE.MeshStandardMaterial({
        color: 0x00FFFF,
        emissive: 0x08A8A0,
        roughness: 0,
        metalness: 0,
        wireframe: false,
        side: THREE.DoubleSide,
        flatShading: true, // 使用THREE.SmoothShading常量来启用平滑着色

        transparent: false,//开启透明
        opacity:0.8,//设置透明度
    });
    //3. 长方体网格模型Mesh
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(coord.x, coord.y, coord.z);
    //4. 长方体添加到虚拟场景中
    scene.add(mesh);
    // 设置渲染循环
    const animate = () => {
        mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    };
    animate();
    // 设置相机控件轨道控制器OrbitControls
    const controls = new OrbitControls(camera, renderer.domElement);
}
// 创建光源
const initDirectionalLight = () => {
    // 平行光
    const directionalLight = new THREE.DirectionalLight(0xffffff, 5);
    // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
    directionalLight.position.set(800, 1000, 500);
    // 方向光默认指向xyz坐标原点
    scene.add(directionalLight);

    // const directionalLight2 = new THREE.DirectionalLight(0xffffff, 5);
    // // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
    // directionalLight2.position.set(800, -1000, -500);
    // // 方向光默认指向xyz坐标原点
    // scene.add(directionalLight2);

    // const directionalLight3 = new THREE.DirectionalLight(0xffffff, 5);
    // // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
    // directionalLight3.position.set(-800, -1000, 500);
    // // 方向光默认指向xyz坐标原点
    // scene.add(directionalLight3);

    // const directionalLight4 = new THREE.DirectionalLight(0xffffff, 5);
    // // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
    // directionalLight4.position.set(-800, 1000, -500);
    // // 方向光默认指向xyz坐标原点
    // scene.add(directionalLight4);
}
</script>

<style scoped>
/* 您可以在这里添加样式 */
</style>